<template>
  <div>
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" size="default"
      status-icon>
      <el-form-item label="培训名称：" prop="trainingName">
        <el-input v-model="ruleForm.trainingName" />
      </el-form-item>
      <el-form-item label="培训地点：">
        线上
      </el-form-item>
      <el-form-item label="开始时间：" prop="startTime">
        <el-date-picker v-model="ruleForm.startTime" type="datetime" placeholder="请选择开始时间"
          style="width: 100%" value-format="YYYY-MM-DD HH:mm:ss" />
      </el-form-item>
      <el-form-item label="定向层级：" prop="directionalHierarchy">
        <el-radio-group v-model="ruleForm.directionalHierarchy">
          <el-radio label="按组织" :value="1"></el-radio>
          <el-radio label="按人员" :value="2"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="培训对象：">
        <el-button v-if="selectList.length==0" type="primary" link @click="drawerVisible = true">请选择</el-button>
        <el-text v-else class="mx-1" type="primary" @click="drawerVisible = true">已选择{{ selectList.length }}个培训{{ruleForm.directionalHierarchy == 1 ? '对象' : '人员'}}</el-text>
      </el-form-item>
      <el-form-item label="分类">
        <remoteSelect code="TRAINING_TYPE" api="getDictItemList" filterKey="value" propName="trainingCategoryLabel" v-model="ruleForm.trainingCategory" v-model:modelName="ruleForm.trainingCategoryLabel"></remoteSelect>
      </el-form-item>
      <el-form-item label="上传视频：" prop="uploadVideo">
        <UploadVideo uploadTip="上传视频" fileType="video/mp4" :modelValue="ruleForm.uploadVideo" 
        apiName="ost_uploadFile"
        :fileSize="100"
        :limit="1"
        @update:modelValue="handleUpload"></UploadVideo>
      </el-form-item>
      <el-form-item label="发布人" prop="trainingPublisher">
        <el-input v-model="ruleForm.trainingPublisher" />
      </el-form-item>
      <el-form-item label="发布时间" prop="trainingPublishDate">
         <el-date-picker v-model="ruleForm.trainingPublishDate" type="date" placeholder="请选择发布时间"
          style="width: 100%" value-format="YYYY-MM-DD" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          发布培训任务
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
    <el-drawer size="60%" v-model="drawerVisible" :title="ruleForm.directionalHierarchy == 1 ? '添加培训对象' : '添加培训人员'">
      <TrainOrg v-if="ruleForm.directionalHierarchy == 1" @close="handleClose"></TrainOrg>
      <TrainPerson v-if="ruleForm.directionalHierarchy == 2" @close="handleClose"></TrainPerson>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import {ElMessage} from 'element-plus'
import UploadVideo from '@/components/AplidCrud/src/AplidUpload/index.vue'
import TrainOrg from '../TrainOrg/index.vue';
import TrainPerson from '../TrainPerson/index.vue'
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import api from '@/apiMod'
import remoteSelect from '@/components/AplidCrud/src/AplidRemote/index'

interface RuleForm {
  trainingName: string
  startTime: string
  directionalHierarchy: number
  directionalHierarchyLabel:string
  uploadVideo:string
  creditCodeList?: Array<string>
  bscSkillTrainingItemList?: Array<any>
  trainingCategory?:string|number
  trainingCategoryLabel?:string
  trainingPublisher?:string
  trainingPublishDate?:string
}
const drawerVisible = ref(false)
const selectList = ref([])
const emit = defineEmits<{
  (e: 'refresh')
}>()
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  trainingName: '',
  startTime : '',
  directionalHierarchy: 1,
  uploadVideo: '',
  directionalHierarchyLabel: '按组织',
  trainingCategory:"1",
  trainingCategoryLabel:'护理员培训',
  trainingPublisher:'',
  trainingPublishDate:'',
})

const rules = reactive<any>({
  trainingName: [
    { required: true, message: '请输入培训名称', trigger: 'blur' },
  ],
  startTime: [
    {
      type: 'date',
      required: true,
      message: '请选择开始时间',
      trigger: 'change',
    },
  ],
  uploadVideo: [
    {
      type: 'string',
      required: true,
      message: '请上传视频文件',
      trigger: 'change',
    },
  ],
  resource: [
    {
      required: true,
      message: 'Please select activity resource',
      trigger: 'change',
    },
  ],
})
const handleUpload = async(data:string) => {
  console.log('跟新',data)
  ruleForm.uploadVideo = data
  // 单独校验一下视频
  await ruleFormRef.value.validateField('uploadVideo')
}

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      ruleForm.directionalHierarchyLabel = ruleForm.directionalHierarchy == 1 ? '按组织' : '按人员'
      const res = await api.view_bscSkillTraining_add(ruleForm)
      if(res.code == 0){
        ElMessage.success('新增成功')
        emit('refresh')
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
const handleClose = (data) => {
  selectList.value = data
  if(ruleForm.directionalHierarchy == 1){
    ruleForm.creditCodeList = data.map(item => item.creditCode)
    // ruleForm.creditCodeList = ['123']
  }else{
    ruleForm.bscSkillTrainingItemList = data.map(item => {
      delete item.id
      return item
    })
  }
  drawerVisible.value = false
}
</script>

<style scoped></style>